import { Theme, Settings, BoolSettTypes, ConfigData } from "globals.slint";
import { VerticalBox, HorizontalBox, ScrollView, TextEdit } from "std-widgets.slint";
import { ToolTip } from "tooltip.slint";

enum GHKShortcuts {
    toggle-timer,
    reset-timer,
    skip-round,
}

export global ConfigCallbacks {
    pure callback new-ghk(GHKShortcuts, KeyEvent);

    in property<[ConfigData]> configs;
}

export component CheckBox {
    callback clicked;
    in-out property <bool> checked;
    in property <bool> enabled: true;

    width: self.height;

    checkbox := Rectangle {
        width: 18px;
        height: 18px;
        border-color: Theme.background-lightest;
        border-width: 2px;
        border-radius: self.width * 50%;

        animate background { duration: 150ms; }
    }

    ta := TouchArea {
        mouse-cursor: parent.enabled ? default : not-allowed;
        clicked => {
            if (parent.enabled) {
                parent.clicked()
            }
        }
    }

    states [
        disabled when !root.enabled : {
            checkbox.border-color: Theme.background-light;
        }
        checked-no-hv when root.checked && !ta.has-hover : {
            checkbox.border-width: 0;
            checkbox.background: Theme.accent;
        }

        checked-hv when root.checked && ta.has-hover : {
            checkbox.border-width: 2px;
            checkbox.background: Theme.accent;
            checkbox.border-color: Theme.background-lightest;
        }

        unchecked-no-hv when !root.checked && !ta.has-hover : {
            checkbox.border-color: Theme.background-lightest;
        }

        unchecked-hv when !root.checked && ta.has-hover : {
            checkbox.border-color: Theme.accent;
        }
    ]
}


component ShortCutTag inherits HorizontalLayout {
    in property<string> label;
    out property<bool> editing;
    in property<bool> enabled: true;

    callback new-ghk(KeyEvent);

    Rectangle {
        height: 20px;
        y: (parent.height - self.height)/2;
        width: 120px;
        border-width: ghk-focus.has-focus ? 2px : 0px;
        border-color: Theme.background-lightest;
        border-radius: 3px;
        background: ghk-focus.has-focus ? Theme.background : Theme.background-light;

        ghk-txt := Text {
            text: root.label;
            font-family: "Roboto Mono";
            color: root.enabled ? Theme.accent : Theme.background;
        }

        ta := TouchArea {
            mouse-cursor: root.enabled ? (self.has-hover ? text : default) : not-allowed;
            clicked => {
                if (enabled) {
                    if (!ghk-focus.enabled) {
                        ghk-focus.enabled = true;
                        ghk-focus.focus();
                    } else {
                        ghk-focus.enabled = false;
                    }
                }
            }

            ghk-focus := FocusScope {
                enabled: false;
                key-released(event) => {
                    self.enabled = false;
                    /*if (event.text == Key.Tab || event.text == Key.Escape)
                    {
                        return reject;
                    }*/
                    new-ghk(event);
                    accept
                }
            }
        }
    }
}

component ConfigBar inherits Rectangle {
    in property<string> label;
    in-out property<bool> hidden: false;
    in property<bool> enabled: true;
    in property<bool> animate-in;
    in property<bool> animate-out;

    height: 44px;
    width: 100%;
    background: Theme.background-light;
    border-radius: 5px;

    Rectangle {
        height: parent.height;
        width: parent.width;
        background: Theme.background;
        border-radius: parent.border-radius;

        HorizontalBox {
            Text {
                vertical-alignment: center;
                text: root.label;
                font-size: 11pt;

                states [
                    disabled when !root.enabled : {
                        color: Theme.background-light;
                    }
                    enabled when root.enabled : {
                        color: Theme.background-lightest;
                    }

                ]
            }

            @children
            //So in Slint 1.6 the modification to the way children are added this now is causing the layout
            //to alter, and pushing the "check box" to the left even though the tool tip isn't visible.
            //I initially had the tooltip after @children so it would end up above them in the Z order.
            //Might need to look into some other options like manually setting the Z-order, but since
            //the tooltips aren't fully functional right now I'll just comment this out.
            /*if Settings.is-wayland : ToolTip {
                text: "Unsupported under Wayland";
            }*/
        }
        
        states [
            ani_out when animate-out : {
                x: -parent.width * 1.1;

                in {
                    animate x {
                        duration: 350ms;
                        easing: ease-in-out;
                    }
                }
            }

            ani_in when animate-in && enabled : {
                x: -parent.width * 1.1;
            }

            stable when enabled : {
                x: 0;

                in {
                    animate x {
                        duration: 350ms;
                        easing: ease-in-out;
                    }
                }
            }
        ]
    }
}


export component ConfigPage inherits Rectangle {
    background: Theme.background-light;
    out property<int> active-theme: 0;
    in property <[ConfigData]> configs: ConfigCallbacks.configs;

    VerticalBox {
        ScrollView {
            VerticalBox {
                Text {
                    text: "Settings";
                    horizontal-alignment: center;
                    font-size: 11pt;
                    color: Theme.foreground;
                }

                for setting[idx] in root.configs : ConfigBar {
                    label: setting.name;
                    hidden: false;
                    enabled: setting.enabled;
                    animate-in: setting.animate-in;
                    animate-out: setting.animate-out;
                    CheckBox {
                        checked: setting.state;
                        enabled: parent.enabled;
                        clicked => {
                            Settings.bool-changed(setting.sett-param, self.checked);
                        }
                    }
                }

                Text {
                    text: "Global Shortcuts";
                    horizontal-alignment: center;
                    font-size: 11pt;
                    color: Theme.foreground;
                }

                for setting[idx] in [
                    {lbl: "Toggle Timer", shortcut: Settings.tt-ghk, ghk: GHKShortcuts.toggle-timer, enabled: !Settings.is-wayland},
                    {lbl: "Reset Timer", shortcut: Settings.rst-ghk, ghk: GHKShortcuts.reset-timer, enabled: !Settings.is-wayland},
                    {lbl: "Skip Round", shortcut: Settings.skp-ghk, ghk: GHKShortcuts.skip-round, enabled: !Settings.is-wayland},
                ] : ConfigBar {
                    label: setting.lbl;
                    ShortCutTag {
                        label: setting.shortcut;
                        enabled: setting.enabled;
                        new-ghk(event) => {ConfigCallbacks.new-ghk(setting.ghk, event)}
                    }
                }
            }
        }
    }
}
